/*
用户注册的路由组件
 */
import React, {Component} from 'react'
import {NavBar,WingBlank,List,InputItem,WhiteSpace,Radio,Button} from 'antd-mobile'

import Logo from "../../components/logo/logo"

const ListItem = List.Item

export default class Register extends Component {
    state = {
        username:'', // 用户名
        password:'', // 密码
        password2:'', // 确认密码
        type:'dashen', // 用户类型默认大神
    }

    // 处理输入的数据
    handleChange = (name,value) => {
        this.setState({
            [name]:value, // 属性名不是name, 而是name变量的值
        })
    }

    // 调到登录界面
    toLogin = () => {
        this.props.history.replace('/login')
    }

    render() {
        const {type} = this.state
        return (
            <div>
                <NavBar>招&nbsp;聘&nbsp;APP</NavBar>
                <Logo />
                <WingBlank>
                    <List>
                        <InputItem placeholder='请输入用户名' onChange={val => this.handleChange('username',val)}>用户名：</InputItem>
                        <WhiteSpace />
                        <InputItem placeholder='请输入密码' onChange={val => this.handleChange('password',val)}>密&emsp;码：</InputItem>
                        <WhiteSpace />
                        <InputItem placeholder='请输入确认密码' onChange={val => this.handleChange('password2',val)}>确认密码：</InputItem>
                        <WhiteSpace />

                        <ListItem>
                            <span>用户类型:</span>&emsp;
                            <Radio checked={type === 'dashen'} onChange={() => this.handleChange('type','dashen')}>大神</Radio>&emsp;&emsp;
                            <Radio checked={type === 'laoban'} onChange={() => this.handleChange('type','laoban')}>老板</Radio>
                        </ListItem>
                        <WhiteSpace />
                        <Button type='primary'>注&emsp;册</Button>
                        <WhiteSpace />
                        <Button onClick={this.toLogin}>已有账户</Button>
                    </List>
                </WingBlank>
            </div>
        )
    }
}
